<template>
	<view class="page">
		<view class="box">
			<view class="header">
				<image src="/static/index/BANNER@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="type_leixing">
				<block v-for="(i,index) in list" :key="index">
					<view class="leixing_box" @click="gojifen(i)">
						<view class="leixing_box_icon">
							<image :src="i.icon" style="width: 100%;height: 100%;"></image>
						</view>
						<text class="icon_text">
							{{i.title}}
						</text>
					</view>
				</block>
			</view>
			<view class="zige">
				<view class="zige_img">
					<image src="/static/index/zgrz@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="zige_img">
					<image src="/static/index/gzufu@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="type_leixing2">
				<block v-for="(i,index) in list2" :key="index">
					<view class="leixing_box">
						<view class="leixing_box_icon">
							<image :src="i.icon" style="width: 100%;height: 100%;"></image>
						</view>
						<text class="icon_text">
							{{i.title}}
						</text>
					</view>
				</block>
			</view>
			<view class="main_changye">
				<image src="/static/index/BANNER2 @2x.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="main_changye2">
				<view class="main_changye2_img">
					<image src="/static/index/2 @2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="main_changye2_img2">
					<view class="main_changye2_img2_box">
						<image src="/static/index/3@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="main_changye2_img2_box">
						<image src="/static/index/4@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="tuijian">
			<view class="tuijian_img">
				<image src="/static/index/hwtj@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="tuijian_liebiao">
			<block v-for="i in 4">
				<view class="tuijian_liebiao_box">
					<view class="box_img">
						<image src="/static/img/0522e42d66ec1761276ab4f265f044c1.png"
							style="width: 100%;height: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;">
						</image>
					</view>
					<view class="box_bommon">
						<view class="box_bommon_left">
							<text class="box_bommon_left_text">虾青素美白丸</text>
							<view class="box_bommon_left_money">
								<text class="money_top"><text class="money_top_a">￥</text>299.00</text>
								<text class="money_bootom"><text class="money_top_b">￥</text>299.00</text>
							</view>
						</view>
						<view class="box_bommon_right">
							<image src="/static/index/jiarugouwuche@2x.png"></image>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="list3_box">
			<block v-for="i in list3">
				<view class="list3_title">
					{{i.title}}
				</view>
			</block>
		</view>
		<view class="zhichi">
			聚宝赞提供技术支持
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list3: [{
					title: '店铺首页'
				}, {
					title: '我的订单'
				}, {
					title: '店铺信息'
				}],
				list: [{
					icon: '/static/index/sc @2x.png',
					title: '商城购物'
				}, {
					icon: '/static/index/jfdh@2x.png',
					title: '积分兑换',
					path:'jifen'
				}, {
					icon: '/static/index/bxyk@2x.png',
					title: '办信用卡'
				}, {
					icon: '/static/index/dkfu@2x.png',
					title: '贷款服务'
				}, {
					icon: '/static/index/lxyw@2x.png',
					title: '拉新业务'
				}, {
					icon: '/static/index/gsfu@2x.png',
					title: '工商服务'
				}, {
					icon: '/static/index/bgfu@2x.png',
					title: '变更服务'
				}, {
					icon: '/static/index/csfw@2x.png',
					title: '财税服务'
				}, {
					icon: '/static/index/ygfu@2x.png',
					title: '用工服务'
				}, {
					icon: '/static/index/zscq@2x.png',
					title: '知识产权'
				}],
				list2: [{
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}, {
					icon: '/static/index/我的套餐@2x.png',
					title: '养老计算器'
				}]
			}
		},
		methods: {
			gojifen(b) {
				uni.navigateTo({
					url: `/pages/${b.path}/${b.path}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F1F1;
		overflow-x: hidden;
	}

	.box {
		padding: 20rpx 33rpx;
		height: 1680rpx;
		width: 100%;
		background-color: #FFF;
	}

	.header {
		width: 683rpx;
		height: 312rpx;
	}

	.type_leixing {
		margin-top: 24rpx;
		height: 296rpx;
		width: 683rpx;
		// background-color: red;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.leixing_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 17%;
		}

		.leixing_box_icon {
			display: flex;
			align-items: center;
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 8rpx;
		}

		.icon_text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.zige {
		width: 683rpx;
		display: flex;
		margin-top: 40rpx;

		.zige_img {
			margin-right: 8rpx;
			width: 337rpx;
			height: 161rpx;
		}
	}

	.type_leixing2 {
		margin-top: 24rpx;
		height: 296rpx;
		width: 683rpx;
		// background-color: red;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.leixing_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 20.2%;
		}

		.leixing_box_icon {
			display: flex;
			align-items: center;
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 8rpx;
		}

		.icon_text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.main_changye {
		height: 178rpx;
		width: 685rpx;
		margin-top: 30rpx;
	}

	.main_changye2 {
		display: flex;
		height: 280rpx;
		width: 685rpx;
		margin-top: 39rpx;

		.main_changye2_img {
			width: 333rpx;
			height: 100%;
		}

		.main_changye2_img2 {
			display: flex;
			margin-left: 16rpx;
			flex-direction: column;
			justify-content: space-between;

			.main_changye2_img2_box {
				width: 333rpx;
				height: 135rpx;
				margin-bottom: 8rpx;
			}
		}
	}

	.tuijian {
		width: 92%;
		padding: 15rpx 33rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.tuijian_img {
			width: 319rpx;
			height: 35rpx;
		}
	}

	.tuijian_liebiao {
		padding: 20rpx 33rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.tuijian_liebiao_box {
			width: 330rpx;
			height: 518rpx;
			border-radius: 55rpx !important;
			margin-bottom: 20rpx;

			.box_img {
				width: 100%;
				height: 324rpx;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
			}

			.box_bommon {
				width: 100%;
				height: 194rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
			}
		}
	}

	.box_bommon_left {
		height: 100%;
		justify-content: space-around;
		align-items: center;
		margin-left: 20rpx;

		.box_bommon_left_text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 26rpx;
			color: #2A2A2A;
			padding-top: 10rpx;
			line-height: 70rpx;
			height: 70rpx;
			display: block;
		}

		.box_bommon_left_money {
			display: flex;
			flex-direction: column;
			height: 53%;
			justify-content: flex-end;

			.money_top {
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 36rpx;
				color: #FF3B3B;

				.money_top_a {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 26rpx;
					color: #FF3B3B;
				}
			}

			.money_bootom {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;

				.money_top_b {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	}

	.box_bommon_right {
		padding-top: 20rpx;
		padding-right: 22rpx;
		width: 56rpx;
		height: 56rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.list3_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 26rpx;
	}

	.list3_title {
		width: 132rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Heiti SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
		border-left: 2px solid #ccc;
	}
	.list3_title:first-child{
		border-left: 0px solid #ccc;
	}

	.zhichi {
		width: 100%;
		text-align: center;
		font-family: Heiti SC;
		font-weight: 300;
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 41rpx;
	}
</style>